
.detail-content-wrap{
    width: 100%;
    height: 100%;
    background: #fff;
    display: flex;
    flex-direction: column;
    .detail-content{
        
        flex: 1;
        overflow-y: scroll;
        //position: relative;
        .detial-top{
            width: 100%;
            height: 2.46rem;
            padding-bottom: .18rem;
           
            width: 100%;
            // background-color: rgba(0,0,0,.1);
            background-image: url("https://img.alicdn.com/bao/uploaded/i4/2251059038/O1CN01cnrDZz2GdSBunmOwb_!!0-item_pic.jpg_400x400");
            background-size: 100000%;
            background-repeat: no-repeat;
            overflow: hidden;
            .detail-top-desc{
                width: 100%;
                height: 1.82rem;
                padding:.18rem .2rem 0;
                display: flex;
                justify-content: space-between;
            }
            .imgfram{
                width: 1.18rem;
                height: 100%;
                background-image:url("https://img.alicdn.com/bao/uploaded/i4/2251059038/O1CN01cnrDZz2GdSBunmOwb_!!0-item_pic.jpg_400x400");
                background-size: 100%;
            }
            .img-desc{
                width: 2rem;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                
                // background: yellow;
                p{
                    font-size: .18rem;
                    color: #fff;
                    font-weight: 600;
                    
                }
                div{
                    width: 100%;
                    height: .5rem;
                    >span{
                        color: red;
                    }
                    p{
                        display: flex;
                        justify-content: space-between;
                        span{
                            background: red;
                            font-size: .08rem;
                            display: flex;
                            align-items: center;
                            
                        }
                        i{
                            font-size: .14rem;
                            color: #ddd;
                        }
                    }
                }
            }
        }
    
        .detail-top-bottom{
            
            width: 100%;
            height: .46rem;
            padding: .1rem .18rem 0;
            
            div{
                background-color: hsla(0,0%,100%,.1);
                display: flex;
                justify-content: space-around;
                align-items: center;
                width: 100%;
                height: 100%;
            }
            p{
                color: #fff;
                flex: 1;
                padding-left: .2rem;
                font-weight: 200;
            }
            i{
                font-size: .14rem;
                color: #fff;
                margin-right: .2rem;
            }
        }
    
        .service-bar{
            background-color: #f8f8f8;
            width: 100%;
            height: .37rem;
            padding:0 .1rem;
            display: flex;
            align-items: center;
            div{
                margin:0 .1rem;
            }
        }
    
        // 观众出场时间
        .detail-time-info{
            width: 100%;
            height: .74rem;
            padding: 0 .2rem;
            
            .detail-time-content{
                margin-top:.24rem;
                width: 100%;
                height: 100%;
                @include border(0 0 1px 0);
                .time{
                    font-size: .18rem;
                    color: #000;
                    font-weight: 700;
                }
                .time-desc{
                    font-size: .13rem;
                    color: #999;
                }
            }
        }
        .location-info{
            width: 100%;
            height: 1.08rem;
            padding: .24rem .2rem;
            display: flex;
            align-items: center;
            .location-left{
                flex: 1;
                p:nth-child(1){
                    font-size: .16rem;
                    color: #000;
                    font-weight: 700;
                }
                p:nth-child(2){
                    margin-top:.12rem;
                    color: #999;
                    
                }
            }
            .location-right{
                width: .2rem;
                height: .2rem;
                margin-left: .15rem;
            }
        }

        .location-line{
            width: 100%;
            height: .12rem;
            background-color: #f8f8f8;
        }

        .navigation-bar{
            width: 100%;
            height: .52rem;
            display: flex;
            background:#fff;
            position: sticky;
            z-index: 99;
            top:0;
            >div{
                flex: 1;
                display: flex;
                justify-content: center;
                align-items: center;
                color: #111;
                flex-direction: column;
                position: relative;
                div:nth-child(1){
                    position: relative;
                    z-index: 99;
                }
                div:nth-child(2){
                    width: .3rem;
                    height: .09rem;
                    position: absolute;
                    top:56%;
                }
                .active{
                    background-image: linear-gradient(90deg,#ffa4a4,#ff2373);
                    box-shadow: 0 -0.05333rem 0.10667rem 0 rgba(255,45,121,.3);
                }
            }
        }


        .competition-intro{
            width: 100%;
            display: flex;
            flex-direction: column;
            .competition-title{
                width: 100%;
                height: .84rem;
                padding: .32rem .2rem .24rem;
                h1{
                    font-size: .22rem;
                }
            }
            .sell-content{
                width: 100%;
                padding: 0 .2rem .3rem .2rem;
                min-height: 5rem;
                @include border(0 0 1px 0);
                img{
                    width: 100%;  
                }
                p{
                    color: #888;
                }

            }
            .notice-content{
                width: 100%;
                padding: 0 .2rem;
                @include border(0 0 1px 0);
                h3{
                    font-weight: 800;
                }
                .info-item{
                    width: 100%;
                    height: .45rem;
                    display: flex;
                    // justify-content: center;
                    align-items: center;
                    i{
                        width: .13rem;
                        height: .14rem;
                        margin-bottom: .05rem;
                        margin-right: .1rem;
                    }
                }
                .info-text{
                    margin-left: .23rem;
                }
                .read-more{
                    width: 100%;
                    height: .75rem;
                    padding-bottom:.3rem;
                    display: flex;
                    justify-content: center;
                    align-items: flex-end;
                    @include border(0 0 1px 0);
                    p{
                        color: #ff2d79;
                        font-size: .16rem;
                    }
                }
                h3:nth-of-type(2){
                    margin-top:.3rem;
                }

                .info-line{
                    margin: .2rem;
                    width: 100%;
                    height: .01rem;
                }
            }
        }
        .recommend-list{
            width: 100%;
            min-height: 2rem;
            .recommend-show{
                width: 100%;
                height: 1.68rem;
                padding: .32rem .2rem .16rem;
                display: flex;
                justify-content: center;
                align-items: center;
                .recommend-img{
                    width: .91rem;
                    height: 1.2rem;
                    img{
                        width: .91rem;
                        height: 100%;
                    }
                }
                .recommend-desc{
                    width: 2.42rem;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    position: relative;
                    .recommend-desc-name{
                        font-size: .16rem;
                        font-weight: 700;
                        
                    }
                    .recommend-desc-city{
                        font-size: .14rem;
                        color: #aaa;
                        margin-top: .06rem;
                        
                    }
                    .recommend-desc-price{
                        
                        
                        color:#ff1268;
                    }
                }
            }
        }
    }


    // 底部导航条
    footer{
        width: 100%;
        height: .61rem;
        @include border(1px 0 0 0);
        display: flex;
        padding-top:.1rem;
        .left{
            width: .5rem;
            height: .5rem;
            font-size: .1rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-content: center;
            text-align: center;
            i{
                text-align: center;
                font-size: .2rem;
            }
        }
        .footer-button{
            width: 2.68rem;
            height: .45rem;
            margin-right: .2rem;
            border-radius: .25rem;
            background-image: linear-gradient(90deg,#ff7f81,#ff2d79);
            display: flex;
            justify-content: center;
            align-items: center;
            p{
                font-size: .18rem;
                color: #fff;
            }
        }
    }
}
